<template>
	<view class="cart">
		<view class="cart-bottom" v-if="cartCount==0">
			<view class="left">
				<u-image width="72rpx" height="72rpx" src="@/static/images/cart-empty.png"></u-image>
				<view class="u-m-l-16 u-tips-color">
					购物车是空的
				</view>
			</view>
			<view class="right">
				<view class="but-empty">
					请选择
				</view>
			</view>
		</view>
		<view class="cart-bottom" v-if="cartCount>0">
			<view class="left">
				<view class="img" :animation="animationData" style="width: 72rpx;height: 72rpx;">
					<u-image width="100%" height="100%" src="@/static/images/cart-in.png" @click="$u.throttle(cartShow=!cartShow,200)"></u-image>
					<u-badge type="error" :count="cartCount" :offset="[-10,-10]"></u-badge>
				</view>
				
				<view class="u-m-l-16 u-tips-color">
					<price size="large" :price="goodsTotalPrice-dePrice" :taxPrice="goodsTotalPrice" />
				</view>
			</view>
			<view class="right">
				<view v-if="!cartUseCoupon.id" class="but-jiesuan" @click="submitCarts">
					去结算
				</view>
				<view v-if="cartUseCoupon.id" class="but-jiesuan" @click="submitCarts">
					<view class="u-m-t-4">领券结算</view>
					<view class="u-m-b-4">￥{{goodsTotalPrice-dePrice-parseFloat(cartUseCoupon.activityRuleList[0].couponAmount)}}</view>
				</view>
			</view>
		</view>
		<u-popup v-model="cartShow" :z-index="9" mode="bottom" :border-radius="16">
			<view class="cart-float">
				<view class="shop-act u-font-24 u-main-color" v-if="shopCartActivityList.length>0">
					<view class="left">
						<tag type="act" :activityType="shopCartActivityList[0].activityType" />
						<actCartDescription :type="shopCartActivityList[0].activityType" :nowActivity="nowShopActivity" :willActivity="willShopActivity" :nowActivityMon="goodsTotalPrice" />
					</view>
					<view class="right u-type-error u-m-l-26" @click="toMake({
						activityId:''
					})">
						去凑单<u-icon class="u-m-l-8" name="arrow-right" size="20"></u-icon>
					</view>
				</view>
				<u-checkbox-group shape="circle">
					<view class="cart-float-content">
						<view class="checkAll">
							<u-checkbox v-model="cartData.check" @change="checkAll">
								<text class="u-main-color u-font-bold u-font-26">全选</text>
								<text class="u-font-24">(已选{{checkNum}}件)</text>
							</u-checkbox>
							<view class="right u-tips-color">
								<view class="getCoupon" v-if="cartCouponList.receivedCouponList.length>0 || cartCouponList.receiveCouponList.length>0" @click="couponShow=true;cartShow=false">
									领券
									<view class="getCoupon-left"></view>
									<view class="getCoupon-right"></view>
								</view>
								<text class="u-tips-color u-m-l-32" @click="cartClearShow=true">清空购物车</text>
							</view>
						</view>
						<scroll-view scroll-y="true" class="scroll-Y">
							<view class="cart-info" v-for="(item,index) in cartData.cartActivityList" :key="index">
								<view class="cart-info-act u-font-24 u-main-color" v-if="item.activityType !== 999">
									<view class="left">
										<tag type="act" :activityType="item.activityType" />
										<view class="u-m-l-8 u-main-color cart-info-act-showDescription u-line-1" v-if="!item.check">
											{{item.showDescription}}
										</view>
										<view class="u-m-l-8 u-main-color cart-info-act-showDescription u-line-1" v-else>
											<actCartDescription :type="item.activityType" :nowActivity="nowActivityList[index]" :willActivity="willActivityList[index]" :nowActivityMon="nowActivityMonList[index]" />
										</view>
									</view>
									<view class="right u-type-error u-m-l-26" @click="toMake({
										activityId:item.activityId,
										activityName:item.activity.activityName,
									})">
										去凑单<u-icon class="u-m-l-8" name="arrow-right" size="20"></u-icon>
									</view>
								</view>
								<view class="cart-info-act u-font-24 u-main-color" v-if="item.activityType == 999">
									普通商品
								</view>
								<view class="cart-info-goods" v-for="(v,i) in item.cartList" :key="i">
									<view class="left">
										<u-checkbox v-model="v.check" :name="v.cartId" @change="checkCart" ></u-checkbox>
									</view>
									<goods :goods="v" :key='v.cartId' style="flex: 1;" />
								</view>
								<view 
									v-if="nowActivityList && nowActivityList[index] && nowActivityList[index].giftList && nowActivityList[index].giftList .length>0"
								>
									<view
										class="cart-info-goods"
										v-for="(v,i) in nowActivityList[index].giftList"
										:key="v.id">
										<view class="left">
											<view class="giftCheck"></view>
										</view>
										<gift-goods :goods="v" :key='v.cartId' style="flex: 1;" />
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</u-checkbox-group>
			</view>
		</u-popup>
		<u-popup v-model="couponShow" :z-index="11" mode="bottom" :border-radius="16" :closeable="true" @close="closeCoupon" >
			<view class="couponShow">
				<view class="header">
					优惠券
				</view>
				<scroll-view scroll-y="true" class="couponScroll-Y">
					<view class="content">
						<view class="u-main-color u-font-bold u-font-26 u-m-t-32 u-m-b-24" v-if="cartCouponList.receivedCouponList.length>0">
							已领取优惠券
						</view>
						<view class="couponWrapper" v-for="(item,index) in cartCouponList.receivedCouponList" :key="index">
							<coupon :coupon="item" :type="2" @afterSave="afterSave" />
							<view class="couponWrapper-bottom">
								<view class="type">
									{{item.activityClass == '1'?'全店商品可用':'部分商品可用'}}
									
								</view>
								<!-- <view class="u-font-24 u-m-l-16">
									购物车已选4件（共1000元），满足使用条件
								</view> -->
							</view>
						</view>
						<view class="u-main-color u-font-bold u-font-26 u-m-t-40 u-m-b-24" v-if="cartCouponList.receiveCouponList.length>0">
							可领取优惠券
						</view>
						<view class="couponWrapper" v-for="(item,index) in cartCouponList.receiveCouponList" :key="index">
							<coupon  :coupon="item" :type="1" @afterSave="afterSave" />
							<view class="couponWrapper-bottom">
								<view class="type">
									{{item.activityClass == '1'?'全店商品可用':'部分商品可用'}}
								</view>
								<!-- <view class="u-font-24 u-m-l-16">
									购物车已选4件（共1000元），满足使用条件
								</view> -->
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<u-modal v-model="cartClearShow" content="确定清空购物车吗？" :show-cancel-button="true" @confirm="cartClear"></u-modal>
	</view>
</template>

<script>
	import tag from '@/components/activity/tag.vue'
	import actCartDescription from '@/components/activity/actCartDescripe.vue'
	import price from '@/components/goods/price.vue'
	import goods from './goods.vue'
	import giftGoods from './giftGoods.vue'
	import coupon from './coupon.vue'
	import { mapActions, mapState, mapMutations } from 'vuex';
	export default{
		components:{ tag, goods, giftGoods, price, coupon, actCartDescription},
		data(){
			return {
				cartShow: false,
				couponShow: false,
				cartClearShow:false,
				cartList:[],
				animationData:{}
			}
		},
		computed:{
			...mapState({
				cartCount: state => state.cart.cartCount,
				cartUseCoupon: state => state.cart.cartUseCoupon,
				cartData: state => state.cart.cartData,
				goodsTotalPrice: state => state.cart.goodsTotalPrice,
				dePrice: state => state.cart.dePrice,
				checkNum: state => state.cart.checkNum,
				nowActivityMonList: state => state.cart.nowActivityMonList,
				nowActivityList: state => state.cart.nowActivityList,
				willActivityList: state => state.cart.willActivityList,
				nowShopActivity: state => state.cart.nowShopActivity,
				willShopActivity: state => state.cart.willShopActivity,
				shopCartActivityList: state => state.cart.shopCartActivityList,
				dePrice: state => state.cart.dePrice,
				cartCouponList: state => state.cart.cartCouponList,
			})
		},
		mounted() {
			this.init()
		},
		methods:{
			...mapActions([
				'ActRemoveCart',
				'ActGetCartList',
				'ActGetCartCount',
				'ActUpdateCartCheck',
				'ActSubmitCarts',
				'ActGetAllCartActivity',
				'ActGetCartCouponList',
				'ActGetCartCoupon',
				'ActMembercouponSave'
			]),
			...mapMutations(['CHECKALL','CHECKCART','GOODS_CLEARCART','STOREGOODS_CLEARCARTNUM']),
			// 单个选择购物车
			async checkCart(e){
				// 是否选中购物车调取购物车存取
				await this.ActUpdateCartCheck({cartIds:e.name,isCheck:e.value?1:0})
				await this.ActGetCartCoupon({
					storeId:uni.getStorageSync('storeId')
				})
				// 更新数据
				this.CHECKCART(e)
			},
			// 全选
			checkAll(e){
				console.log(e)
				let cartIds=[]
				this.cartData.cartActivityList.map((cartActItem,cartActIndex)=>{
					cartActItem.cartList.map((cartItem,cartIndex)=>{
						cartIds.push(cartItem.cartId)
					})
				})
				this.ActUpdateCartCheck({cartIds:cartIds.join(','),isCheck:e.value?1:0})
				this.CHECKALL(e.value)
			},
			closeCoupon(){
				this.cartShow = true
			},
			createAnimation(){
				let animation = uni.createAnimation({
					duration: 200,
					timingFunction: 'linear',
				})
				animation.scale(1.2,1.2).step()
				this.animationData = animation.export();
				setTimeout(() => {
					animation.scale(1,1).step()
					this.animationData = animation.export()
				}, 200)
			},
			async cartClear(){
				const res = await this.ActRemoveCart({storeId:uni.getStorageSync('storeId')})
				if(res.success){
					this.GOODS_CLEARCART()
					this.STOREGOODS_CLEARCARTNUM()
					this.cartShow=false
				}
			},
			afterSave(){
				this.ActGetCartCouponList({
					storeId:uni.getStorageSync('storeId')
				})
			},
			async submitCarts(){
				let cartIds=[]
				this.cartData.cartActivityList.map((cartActItem,cartActIndex)=>{
					cartActItem.cartList.map((cartItem,cartIndex)=>{
						if(cartItem.check){
							cartIds.push(cartItem.cartId)
						}
					})
				})
				if(this.cartUseCoupon.id && this.cartUseCoupon.isReceive){
					await this.ActMembercouponSave({
						activityId:this.cartUseCoupon.id
					})
				}
				const res = await this.ActSubmitCarts({
					cartIds:cartIds.join(','),
					storeId:uni.getStorageSync('storeId')
				})
				if(res.success){
					this.cartShow=false
				}
			},
			async toMake(arg){
				// let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				// let curRoute = routes[routes.length - 1].route
				// if(curRoute != "pages/goods/goodsList" || arg.activityId){
				// }
				this.cartShow=false
				this.$u.route(`pages/goods/goodsList?activityId=${arg.activityId}&activityName=${arg.activityName}`)
			},
			async init(){
				await this.ActGetCartCount({
					storeId:uni.getStorageSync('storeId')
				})
				await this.ActGetAllCartActivity({
					storeId:uni.getStorageSync('storeId'),
					isCoupon:0,
					isAll:1
				})
				await this.ActGetCartList({
					storeId:uni.getStorageSync('storeId')
				})
				await this.ActGetCartCouponList({
					storeId:uni.getStorageSync('storeId')
				})
				await this.ActGetCartCoupon({
					storeId:uni.getStorageSync('storeId')
				})
				
			}
		},
		watch:{
			cartCount(newValue,oldValue){
				if(newValue>oldValue){
					this.createAnimation()
				}
				if(newValue<=0){
					this.cartShow=false
				}
			},
			couponShow(couponShow){
				if(couponShow){
					this.ActGetCartCouponList({
						storeId:uni.getStorageSync('storeId')
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cart{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		z-index: 2;
		.giftCheck{
			width: 34rpx;
			height: 34rpx;
			background-color: $u-type-primary;
			border-radius: 50%;
			margin-right: 34rpx;
		}
		.couponShow{
			padding: 32rpx 24rpx;
			.header{
				color: $u-main-color;
				text-align: center;
				font-weight: bold;
				font-size: 32rpx;
			}
			.couponScroll-Y{
				max-height: 66vh;
			}
			.content{
				.couponWrapper{
					margin-top: 34rpx;
					.couponWrapper-bottom{
						display: flex;
						margin-top: 10rpx;
						.type{
							width: 168rpx;
							height: 36rpx;
							background: #eaf4ff;
							border-radius: 6rpx;
							font-size: 24rpx;
							color: $u-type-primary;
							text-align: center;
							flex-shrink: 0;
						}
					}
				}
			}
		}
		.cart-float{
			padding-bottom: 140rpx;
			.shop-act{
				padding: 22rpx;
				background-color: #FFF7EB;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left{
					display: flex;
					align-items: center;
				}
			}
			.cart-float-content{
				width: 100vw;
				.checkAll{
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 22rpx 24rpx;
					font-size: 24rpx;
					.right{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.getCoupon{
							width: 76rpx;
							line-height: 48rpx;
							background-image: linear-gradient(to right,#ff6b00, #f90f00);
							color: #fff;
							font-size:22rpx;
							text-align: center;
							position: relative;
							.getCoupon-left,.getCoupon-right{
								width:10rpx;
								height: 10rpx;
								background-color: #fff;
								border-radius: 100%;
								position: absolute;
								top: 20rpx;
							}
							.getCoupon-left{
								left: -6rpx;
							}
							.getCoupon-right{
								right: -6rpx;
							}
						}
					}
				}
				.scroll-Y{
					max-height: 66vh;
				}
				.cart-info{
					border-top: 1rpx solid $u-bg-color;
					.cart-info-act{
						padding: 22rpx 24rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.left{
							display: flex;
							align-items: center;
							.cart-info-act-showDescription{
								width: 440rpx;
							}
						}
					}
					.cart-info-goods{
						padding: 22rpx 24rpx;
						display: flex;
						align-items: center;
					}
				}
			}
		}
		.cart-bottom{
			position: absolute;
			left: 0;
			top:0;
			z-index: 10;
			width: 100%;
			padding: 14rpx 24rpx;
			height: 100rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				.img{
					position: relative;
				}
			}
			.right{
				.but-empty{
					line-height: 80rpx;
					width: 196rpx;
					background-color: $u-tips-color;
					border-radius: 136rpx;
					text-align: center;
					font-size: 28rpx;
					color: #fff;
				}
				.but-jiesuan{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					background-color: $u-type-error;
					width: 196rpx;
					border-radius: 136rpx;
					font-size: 28rpx;
					color: #fff;
					height: 80rpx;
				}
			}
		}
	}
</style>
